<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>.::SAEL::. Seguimiento de Aprendices</title>
                <link rel="shortcut icon" href="favicon.ico"/>
            </f:facet>
        </h:head>

        <h:body>

      <h:graphicImage url="images/banner_sael.jpg" width="100%" height="100%" alt="LogoAtus"  style="vertical-align: top;"/> 
            <p:panel>
                <p:panelGrid> 
                    <p:row>
                        <p:column style="vertical-align: top;"> 
                    <h:form>
                        <p:menu>
                             <p:submenu label="Menú">                                
                                <p:menuitem value="Inicio" url="indexInstructor.xhtml" />
                                <p:menuitem value="Alistar Seguimiento" url="gestionSeguimientosIns.xhtml" />
                                <p:menuitem value="Ejecutar Seguimiento" url="ejecutarSeguimientosIns.xhtml" />
                                <p:menuitem value="Aprendices" url="gestionAprendicesIns.xhtml" />
                                <p:menuitem value="Instructores" url="gestionInstructoresIns.xhtml" />
                                <p:menuitem value="Reportes" url="reportesSaelIns.xhtml" />
                                <p:menuitem value="Cambio Contraseña" url="CambiaPasswordInst.xhtml" />
                                <p:menuitem value="Cerrar Sesión" actionListener="#{usuariosSaelVista.cerrarSesion_action}" />
                            </p:submenu>                     
                        </p:menu>
                    </h:form>
                        

                <!-- dialogo de ayuda -->
                <p:dialog id="modalDialog" header="Ayuda" widgetVar="helpDialog" showEffect="fade" hideEffect="bounce" modal="true" dynamic="true">  
                    <p align="justify">                       
                    En esta página usted podrá:<br/><br/>
                    <b>-Cambiar Contraseña de Accesso a GEPAD - SAEL:</b> el usuario que está actualmente utilizando el sistema podrá cambiar su contraseña 
                    de acceso en cualquier momento y cuantas veces lo desee. Solo debe digitar su contraseña actual, luego la nueva contraseña dos veces. 
                    Finalmente dar clic en el botón Modificar.
                    <br/>             
                    </p>
                </p:dialog>
                </p:column>
                        <p:column>
                    <h:form id="formulario">                       
                        <p:panel id="panel">
                            <p:messages id="mensajes" showDetail="true" />  
                            <p:panel header="Cambio de Contraseña">    
                                 <f:facet name="actions">
                                            <p:commandLink onclick="PF('helpDialog').show();" styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default"><h:outputText styleClass="ui-icon ui-icon-help" /></p:commandLink>
                                        </f:facet>
                                <p:panelGrid id="pnlPassword" columns="2" style="width: 45%;">                                         
                                    <h:outputText value="Contraseña Actual:"/>
                                    <p:password id="passClaveOld" binding="#{usuariosVista.passClaveOld}" size="25"/>

                                    <h:outputText value="Contraseña Nueva:"/>
                                    <p:password id="passClaveNew" binding="#{usuariosVista.passClaveNew}" feedback="true" size="25"/>

                                    <h:outputText value="Confirmar Contraseña:"/>
                                    <p:password id="passClaveNew2" binding="#{usuariosVista.passClaveNew2}" size="25"/> 
                                    
                                    <f:facet name="footer"> 
                                        <div align="center">
                                            <p:commandButton id="btnModificar" value="Modificar" action="#{usuariosVista.cambiarPass_action}" update="panel"/>
                                            <p:commandButton id="btnLimpiarPass" value="Limpiar" action="#{usuariosVista.limpiarPass_action}"  update="panel"/>
                                        </div>
                                    </f:facet>
                                </p:panelGrid>
                            </p:panel>                            

                        </p:panel>
                    </h:form> 
                        </p:column>
                    </p:row>
                </p:panelGrid>
            </p:panel>
       <div align="center">
                <h:graphicImage url="images/pie_sael.jpg" width="100%" height="100%" alt="LogoSAEL"  style="vertical-align: bottom;"/>
            </div>

        </h:body>
    </f:view>
</html>

